<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>eh documentation</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="icon" type="image/x-icon" href="../images/favicon.ico">
	      <link rel="stylesheet" href="../styles/style.css">
    </head>
    <body>

        <div class="navbar navbar-default navbar-fixed-top visible-xs">
            <a href="../" class="navbar-brand">eh documentation</a>
            <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
        </div>

        <div class="xs-menu menu" id="mobile-menu">
                <div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search">
</div>
            <compodoc-menu></compodoc-menu>
        </div>

        <div class="container-fluid main">
           <div class="row main">
               <div class="hidden-xs menu">
                   <compodoc-menu mode="normal"></compodoc-menu>
               </div>
               <!-- START CONTENT -->
               <div class="content component">
                   <div class="content-data">




<ol class="breadcrumb">
  <li>Components</li>
  <li>EnrollComponent</li>
</ol>

<ul class="nav nav-tabs" role="tablist">
        <li class="active">
            <a href="#info" role="tab" id="info-tab" data-toggle="tab" data-link="info">Info</a>
        </li>
        <li >
            <a href="#source" role="tab" id="source-tab" data-toggle="tab" data-link="source">Source</a>
        </li>
        <li >
            <a href="#templateData" role="tab" id="templateData-tab" data-toggle="tab" data-link="template">Template</a>
        </li>
        <li >
            <a href="#tree" role="tab" id="tree-tab" data-toggle="tab" data-link="dom-tree">DOM Tree</a>
        </li>
</ul>

<div class="tab-content">
    <div class="tab-pane fade active in" id="c-info"><p class="comment">
    <h3>File</h3>
</p>
<p class="comment">
    <code>src/app/user/cpt/enroll/enroll.component.ts</code>
</p>



    <p class="comment">
        <h3>Implements</h3>
    </p>
    <p class="comment">
                <code><a href="https://angular.io/api/core/OnInit" target="_blank" >OnInit</a></code>
    </p>


<section>
    <h3>Metadata</h3>
    <table class="table table-sm table-hover">
        <tbody>











            <tr>
                <td class="col-md-3">selector</td>
                <td class="col-md-9"><code>app-enroll</code></td>
            </tr>

            <tr>
                <td class="col-md-3">styleUrls</td>
                <td class="col-md-9"><code>enroll.component.scss</code></td>
            </tr>



            <tr>
                <td class="col-md-3">templateUrl</td>
                <td class="col-md-9"><code>./enroll.component.html</code></td>
            </tr>


        </tbody>
    </table>
</section>

    <section>
    <h3 id="index">Index</h3>
    <table class="table table-sm table-bordered index-table">
        <tbody>
                <tr>
                    <td class="col-md-4">
                        <h6><b>Properties</b></h6>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <ul class="index-list">
                            <li>
                                <a href="#agreeValidator">agreeValidator</a>
                            </li>
                            <li>
                                <a href="#confirmationValidator">confirmationValidator</a>
                            </li>
                            <li>
                                <a href="#loading">loading</a>
                            </li>
                            <li>
                                <a href="#req">req</a>
                            </li>
                            <li>
                                <a href="#validateForm">validateForm</a>
                            </li>
                        </ul>
                    </td>
                </tr>

                <tr>
                    <td class="col-md-4">
                        <h6><b>Methods</b></h6>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <ul class="index-list">
                            <li>
                                <a href="#addListen">addListen</a>
                            </li>
                            <li>
                                <a href="#ngOnInit">ngOnInit</a>
                            </li>
                            <li>
                                    <span class="modifier">Async</span>
                                <a href="#submitForm">submitForm</a>
                            </li>
                            <li>
                                <a href="#updateConfirmValidator">updateConfirmValidator</a>
                            </li>
                        </ul>
                    </td>
                </tr>



                <tr>
                    <td class="col-md-4">
                        <h6><b>HostBindings</b></h6>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <ul class="index-list">
                            <li>
                                <a href="#style.align-items">style.align-items</a>
                            </li>
                            <li>
                                <a href="#style.display">style.display</a>
                            </li>
                            <li>
                                <a href="#style.height">style.height</a>
                            </li>
                        </ul>
                    </td>
                </tr>


        </tbody>
    </table>
</section>

    <section>
    <h3 id="constructor">Constructor</h3>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
<code>constructor(noUsernameValidatorService: , fb: <a href="https://angular.io/api/forms/FormBuilder" target="_blank">FormBuilder</a>, storeService: , nzMessageService: , store: <a href="../interfaces/State.html">Store<fromUser.State></a>)</code>
                    </td>
                </tr>
                        <tr>
                            <td class="col-md-4">
                                <div class="io-line">Defined in <a href="" data-line="31" class="link-to-prism">src/app/user/cpt/enroll/enroll.component.ts:31</a></div>
                            </td>
                        </tr>

                <tr>
                    <td class="col-md-4">
                            <div>
                                    <b>Parameters :</b>
                                    <table class="params">
                                        <thead>
                                            <tr>
                                                <td>Name</td>
                                                    <td>Type</td>
                                                <td>Optional</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                                <tr>
                                                        <td>noUsernameValidatorService</td>
                                                  
                                                        <td>
                                                        </td>
                                                  
                                                    <td>
                                                            No
                                                    </td>
                                                    
                                                </tr>
                                                <tr>
                                                        <td>fb</td>
                                                  
                                                        <td>
                                                                    <code><a href="https://angular.io/api/forms/FormBuilder" target="_blank" >FormBuilder</a></code>
                                                        </td>
                                                  
                                                    <td>
                                                            No
                                                    </td>
                                                    
                                                </tr>
                                                <tr>
                                                        <td>storeService</td>
                                                  
                                                        <td>
                                                        </td>
                                                  
                                                    <td>
                                                            No
                                                    </td>
                                                    
                                                </tr>
                                                <tr>
                                                        <td>nzMessageService</td>
                                                  
                                                        <td>
                                                        </td>
                                                  
                                                    <td>
                                                            No
                                                    </td>
                                                    
                                                </tr>
                                                <tr>
                                                        <td>store</td>
                                                  
                                                        <td>
                                                                    <code><a href="../interfaces/State.html" target="_self" >Store&lt;fromUser.State&gt;</a></code>
                                                        </td>
                                                  
                                                    <td>
                                                            No
                                                    </td>
                                                    
                                                </tr>
                                        </tbody>
                                    </table>
                            </div>
                    </td>
                </tr>
            </tbody>
        </table>
</section>



    <section>
    <h3>HostBindings</h3>        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="style.align-items"></a>
                        <span class="name">
                            <b>
                            style.align-items
                            </b>
                            <a href="#style.align-items"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>style.align-items:     <code></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Default value : </i><code>&#x27;center&#x27;</code>
                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="21" class="link-to-prism">src/app/user/cpt/enroll/enroll.component.ts:21</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="style.display"></a>
                        <span class="name">
                            <b>
                            style.display
                            </b>
                            <a href="#style.display"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>style.display:     <code></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Default value : </i><code>&#x27;flex&#x27;</code>
                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="19" class="link-to-prism">src/app/user/cpt/enroll/enroll.component.ts:19</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="style.height"></a>
                        <span class="name">
                            <b>
                            style.height
                            </b>
                            <a href="#style.height"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>style.height:     <code></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Default value : </i><code>&#x27;100%&#x27;</code>
                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="17" class="link-to-prism">src/app/user/cpt/enroll/enroll.component.ts:17</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
</section>


    <section>
    
        <h3 id="methods">
            Methods
        </h3>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="addListen"></a>
                        <span class="name">
                            <b>
                            addListen
                            </b>
                            <a href="#addListen"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
<code>addListen()</code>
                    </td>
                </tr>


                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="57" class="link-to-prism">src/app/user/cpt/enroll/enroll.component.ts:57</a></div>
                            </td>
                        </tr>


                <tr>
                    <td class="col-md-4">

                            <div class="io-description">
                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>

                            </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="ngOnInit"></a>
                        <span class="name">
                            <b>
                            ngOnInit
                            </b>
                            <a href="#ngOnInit"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
<code>ngOnInit()</code>
                    </td>
                </tr>


                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="41" class="link-to-prism">src/app/user/cpt/enroll/enroll.component.ts:41</a></div>
                            </td>
                        </tr>


                <tr>
                    <td class="col-md-4">

                            <div class="io-description">
                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>

                            </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="submitForm"></a>
                        <span class="name">
                            <b>
                                <span class="modifier">Async</span>
                            submitForm
                            </b>
                            <a href="#submitForm"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                            <span class="modifier-icon icon ion-ios-reset"></span>
                        <code>submitForm()</code>
                    </td>
                </tr>


                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="59" class="link-to-prism">src/app/user/cpt/enroll/enroll.component.ts:59</a></div>
                            </td>
                        </tr>


                <tr>
                    <td class="col-md-4">

                            <div class="io-description">
                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>

                            </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="updateConfirmValidator"></a>
                        <span class="name">
                            <b>
                            updateConfirmValidator
                            </b>
                            <a href="#updateConfirmValidator"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
<code>updateConfirmValidator()</code>
                    </td>
                </tr>


                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="80" class="link-to-prism">src/app/user/cpt/enroll/enroll.component.ts:80</a></div>
                            </td>
                        </tr>


                <tr>
                    <td class="col-md-4">

                            <div class="io-description">
                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>

                            </div>
                    </td>
                </tr>
            </tbody>
        </table>
</section>

    <section>
    
        <h3 id="inputs">
            Properties
        </h3>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="agreeValidator"></a>
                        <span class="name">
                            <b>
                            agreeValidator
                            </b>
                            <a href="#agreeValidator"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>agreeValidator:     <code></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Default value : </i><code>(control: FormControl): { [s: string]: boolean } &#x3D;&gt; {
    if (!control.value) {
      return { require: true };
    }
  }</code>
                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="93" class="link-to-prism">src/app/user/cpt/enroll/enroll.component.ts:93</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="confirmationValidator"></a>
                        <span class="name">
                            <b>
                            confirmationValidator
                            </b>
                            <a href="#confirmationValidator"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>confirmationValidator:     <code></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Default value : </i><code>(control: FormControl): { [s: string]: boolean } &#x3D;&gt; {
    if (!control.value) {
      return { required: true };
    } else if (control.value !&#x3D;&#x3D; this.validateForm.controls.password.value) {
      return { confirm: true, error: true };
    }
  }</code>
                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="85" class="link-to-prism">src/app/user/cpt/enroll/enroll.component.ts:85</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="loading"></a>
                        <span class="name">
                            <b>
                            loading
                            </b>
                            <a href="#loading"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>loading:     <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Type : </i>    <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>

                        </td>
                    </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Default value : </i><code>false</code>
                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="25" class="link-to-prism">src/app/user/cpt/enroll/enroll.component.ts:25</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="req"></a>
                        <span class="name">
                            <b>
                            req
                            </b>
                            <a href="#req"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>req:     <code><a href="../interfaces/IEnrollRequest.html" target="_self" >IEnrollRequest</a></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Type : </i>    <code><a href="../interfaces/IEnrollRequest.html" target="_self" >IEnrollRequest</a></code>

                        </td>
                    </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Default value : </i><code>{
    username: &#x27;&#x27;,
    password: &#x27;&#x27;,
    code: &#x27;&#x27;,
  }</code>
                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="27" class="link-to-prism">src/app/user/cpt/enroll/enroll.component.ts:27</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="validateForm"></a>
                        <span class="name">
                            <b>
                            validateForm
                            </b>
                            <a href="#validateForm"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>validateForm:     <code><a href="https://angular.io/api/forms/FormGroup" target="_blank" >FormGroup</a></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Type : </i>    <code><a href="https://angular.io/api/forms/FormGroup" target="_blank" >FormGroup</a></code>

                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="23" class="link-to-prism">src/app/user/cpt/enroll/enroll.component.ts:23</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
</section>

</div>


    <div class="tab-pane fade  tab-source-code" id="c-source">
        <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { Component, OnInit, Inject, HostBinding } from &#x27;@angular/core&#x27;;
import { FormBuilder, FormControl, FormGroup, Validators } from &#x27;@angular/forms&#x27;;

import { IEnrollRequest } from &#x27;@/user/store/models/user&#x27;;

import { Store, select } from &#x27;@ngrx/store&#x27;;
import * as fromUser from &#x27;@/user/store/reducers/user.reducer&#x27;;
import { UserActions } from &#x27;@/user/store/actions&#x27;;

@Component({
  selector: &#x27;app-enroll&#x27;,
  templateUrl: &#x27;./enroll.component.html&#x27;,
  styleUrls: [&#x27;./enroll.component.scss&#x27;],
})
export class EnrollComponent implements OnInit {
  @HostBinding(&#x27;style.height&#x27;)
  public height &#x3D; &#x27;100%&#x27;;
  @HostBinding(&#x27;style.display&#x27;)
  public display &#x3D; &#x27;flex&#x27;;
  @HostBinding(&#x27;style.align-items&#x27;)
  public alignItems &#x3D; &#x27;center&#x27;;

  validateForm: FormGroup;

  loading: boolean &#x3D; false;

  req: IEnrollRequest &#x3D; {
    username: &#x27;&#x27;,
    password: &#x27;&#x27;,
    code: &#x27;&#x27;,
  };

  constructor(
    @Inject(&#x27;NoUsernameValidatorService&#x27;) private noUsernameValidatorService,
    private fb: FormBuilder,
    @Inject(&#x27;StoreService&#x27;) private storeService,
    @Inject(&#x27;NzMessageService&#x27;) private nzMessageService,
    private store: Store&lt;fromUser.State&gt;,
  ) {}

  ngOnInit(): void {
    this.validateForm &#x3D; this.fb.group({
      username: new FormControl(null, {
        validators: [Validators.required],
        asyncValidators: [this.noUsernameValidatorService.validate.bind(this.noUsernameValidatorService)],
        updateOn: &#x27;blur&#x27;,
      }),
      password: [null, [Validators.required]],
      password2: [null, [Validators.required, this.confirmationValidator]],
      code: [null, [Validators.required]],
      agree: [false, this.agreeValidator],
    });

    this.addListen();
  }

  addListen() {}

  async submitForm() {
    // for (const i in this.validateForm.controls) {
    //   this.validateForm.controls[i].markAsDirty();
    //   this.validateForm.controls[i].updateValueAndValidity();
    // }
    this.req.username &#x3D; this.validateForm.controls.username.value;
    this.req.password &#x3D; this.validateForm.controls.password.value;
    this.req.code &#x3D; this.validateForm.controls.code.value;

    const enroll &#x3D; new UserActions.Enroll({ req: this.req });
    this.store.dispatch(enroll);

    console.log(444, enroll);

    // if (200 &#x3D;&#x3D;&#x3D; res.code) {
    //   this.nzMessageService.success(&#x27;注册成功&#x27;);
    //   return;
    // }
    // this.nzMessageService.error(res.msg);
  }

  updateConfirmValidator(): void {
    /** wait for refresh value */
    Promise.resolve().then(() &#x3D;&gt; this.validateForm.controls.password2.updateValueAndValidity());
  }

  confirmationValidator &#x3D; (control: FormControl): { [s: string]: boolean } &#x3D;&gt; {
    if (!control.value) {
      return { required: true };
    } else if (control.value !&#x3D;&#x3D; this.validateForm.controls.password.value) {
      return { confirm: true, error: true };
    }
  };

  agreeValidator &#x3D; (control: FormControl): { [s: string]: boolean } &#x3D;&gt; {
    if (!control.value) {
      return { require: true };
    }
  };
}
</code></pre>
    </div>

    <div class="tab-pane fade " id="c-templateData">
        <pre class="line-numbers"><code class="language-html">&lt;mat-card class&#x3D;&quot;panel-enroll&quot;&gt;
  &lt;form nz-form [formGroup]&#x3D;&quot;validateForm&quot; (ngSubmit)&#x3D;&quot;submitForm()&quot;&gt;
    &lt;div class&#x3D;&quot;i uname&quot;&gt;
      &lt;mat-form-field&gt;
        &lt;input matInput formControlName&#x3D;&quot;username&quot; id&#x3D;&quot;&#x27;username&#x27;&quot; placeholder&#x3D;&quot;Username&quot;&gt;
        &lt;mat-error *ngIf&#x3D;&quot;validateForm.controls.username.hasError(&#x27;required&#x27;)&quot;&gt;
          Please enter a valid email address
        &lt;/mat-error&gt;
        &lt;mat-error *ngIf&#x3D;&quot;validateForm.controls.username.hasError(&#x27;no&#x27;)&quot;&gt;
          user name has exist
        &lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
    &lt;/div&gt;
    &lt;div class&#x3D;&quot;i pwd&quot;&gt;
      &lt;mat-form-field&gt;
        &lt;input placeholder&#x3D;&quot;Password&quot; matInput type&#x3D;&quot;password&quot; id&#x3D;&quot;password&quot; formControlName&#x3D;&quot;password&quot; (ngModelChange)&#x3D;&quot;updateConfirmValidator()&quot;&gt;
        &lt;mat-error *ngIf&#x3D;&quot;validateForm.get(&#x27;password&#x27;).dirty &amp;&amp; validateForm.get(&#x27;password&#x27;).errors&quot;&gt;请输入你的密码&lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
    &lt;/div&gt;
    &lt;div class&#x3D;&quot;i confirm&quot;&gt;
      &lt;mat-form-field&gt;
        &lt;input placeholder&#x3D;&quot;Confirm Password&quot; matInput type&#x3D;&quot;password&quot; formControlName&#x3D;&quot;password2&quot; id&#x3D;&quot;password2&quot;&gt;
        &lt;mat-error *ngIf&#x3D;&quot;validateForm.get(&#x27;password2&#x27;).dirty &amp;&amp; validateForm.get(&#x27;password2&#x27;).errors &amp;&amp; validateForm.get(&#x27;password2&#x27;).hasError(&#x27;required&#x27;)&quot;&gt;
          请确认你的密码
        &lt;/mat-error&gt;
        &lt;mat-error *ngIf&#x3D;&quot;validateForm.get(&#x27;password2&#x27;).dirty &amp;&amp; validateForm.get(&#x27;password2&#x27;).errors &amp;&amp; validateForm.get(&#x27;password2&#x27;).hasError(&#x27;confirm&#x27;)&quot;&gt;
          2次密码不一致
        &lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
    &lt;/div&gt;

    &lt;div class&#x3D;&quot;i code&quot;&gt;
      &lt;mat-form-field&gt;
        &lt;input matInput formControlName&#x3D;&quot;code&quot; placeholder&#x3D;&quot;请输入验证码&quot;&gt;
        &lt;mat-error *ngIf&#x3D;&quot;validateForm.controls.code.hasError(&#x27;required&#x27;)&quot;&gt;
          请输入验证码
        &lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
      &lt;button type&#x3D;&quot;button&quot; mat-button appCode [aim]&#x3D;&#x27;validateForm.controls.username.value&#x27;&gt;获取验证码&lt;/button&gt;
    &lt;/div&gt;

    &lt;div class&#x3D;&quot;i agree&quot;&gt;
      &lt;mat-checkbox formControlName&#x3D;&quot;agree&quot;&gt;我同意用户协议&lt;/mat-checkbox&gt;
    &lt;/div&gt;

    &lt;div class&#x3D;&quot;i login&quot;&gt;
      &lt;button mat-button [disabled]&#x3D;&quot;!validateForm.valid&quot;&gt;注册&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;
&lt;/mat-card&gt;</code></pre>
    </div>

    <div class="tab-pane fade " id="c-tree">
        <div id="tree-container"></div>
        <div class="tree-legend">
            <div class="title">
                <b>Legend</b>
            </div>
            <div>
                <div class="color htmlelement"></div><span>Html element</span>
            </div>
            <div>
                <div class="color component"></div><span>Component</span>
            </div>
            <div>
                <div class="color directive"></div><span>Html element with directive</span>
            </div>
        </div>
    </div>

    
</div>

<script src="../js/libs/vis.min.js"></script>
<script src="../js/libs/htmlparser.js"></script>
<script src="../js/libs/deep-iterator.js"></script>
<script>
        var COMPONENT_TEMPLATE = '<div><mat-card class="panel-enroll">  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">    <div class="i uname">      <mat-form-field>        <input matInput formControlName="username" id="\'username\'" placeholder="Username">        <mat-error *ngIf="validateForm.controls.username.hasError(\'required\')">          Please enter a valid email address        </mat-error>        <mat-error *ngIf="validateForm.controls.username.hasError(\'no\')">          user name has exist        </mat-error>      </mat-form-field>    </div>    <div class="i pwd">      <mat-form-field>        <input placeholder="Password" matInput type="password" id="password" formControlName="password" (ngModelChange)="updateConfirmValidator()">        <mat-error *ngIf="validateForm.get(\'password\').dirty && validateForm.get(\'password\').errors">请输入你的密码</mat-error>      </mat-form-field>    </div>    <div class="i confirm">      <mat-form-field>        <input placeholder="Confirm Password" matInput type="password" formControlName="password2" id="password2">        <mat-error *ngIf="validateForm.get(\'password2\').dirty && validateForm.get(\'password2\').errors && validateForm.get(\'password2\').hasError(\'required\')">          请确认你的密码        </mat-error>        <mat-error *ngIf="validateForm.get(\'password2\').dirty && validateForm.get(\'password2\').errors && validateForm.get(\'password2\').hasError(\'confirm\')">          2次密码不一致        </mat-error>      </mat-form-field>    </div>    <div class="i code">      <mat-form-field>        <input matInput formControlName="code" placeholder="请输入验证码">        <mat-error *ngIf="validateForm.controls.code.hasError(\'required\')">          请输入验证码        </mat-error>      </mat-form-field>      <button type="button" mat-button appCode [aim]=\'validateForm.controls.username.value\'>获取验证码</button>    </div>    <div class="i agree">      <mat-checkbox formControlName="agree">我同意用户协议</mat-checkbox>    </div>    <div class="i login">      <button mat-button [disabled]="!validateForm.valid">注册</button>    </div>  </form></mat-card></div>'
    var COMPONENTS = [{'name': 'AppComponent', 'selector': 'app-root'},{'name': 'BComponent', 'selector': 'app-b'},{'name': 'CComponent', 'selector': 'app-c'},{'name': 'ChangeEmailComponent', 'selector': 'app-change-email'},{'name': 'ChangePasswordComponent', 'selector': 'app-change-password'},{'name': 'ChangePhoneComponent', 'selector': 'app-change-phone'},{'name': 'EnrollComponent', 'selector': 'app-enroll'},{'name': 'FileComponent', 'selector': 'app-file'},{'name': 'FooterComponent', 'selector': 'app-footer'},{'name': 'GoodComponent', 'selector': 'app-good'},{'name': 'HeaderComponent', 'selector': 'app-header'},{'name': 'HomeComponent', 'selector': 'app-home'},{'name': 'LineComponent', 'selector': 'app-line'},{'name': 'LoginComponent', 'selector': 'app-login'},{'name': 'MyComponent', 'selector': 'app-my'},{'name': 'MyComponent', 'selector': 'app-my'},{'name': 'SelectAreaComponent', 'selector': 'app-select-area'},{'name': 'SelectAreaRangeComponent', 'selector': 'app-select-area-range'},{'name': 'SelectGoodTypeComponent', 'selector': 'app-select-good-type'},{'name': 'SelectPosComponent', 'selector': 'app-select-pos'},{'name': 'SideComponent', 'selector': 'app-side'},{'name': 'UserHeaderComponent', 'selector': 'app-user-header'},{'name': 'XlsxComponent', 'selector': 'app-xlsx'}];
    var DIRECTIVES = [{'name': 'CodeDirective', 'selector': '[appCode]'}];
    var ACTUAL_COMPONENT = {'name': 'EnrollComponent'};
</script>
<script src="../js/tree.js"></script>














                   </div><div class="search-results">
    <div class="has-results">
        <h1 class="search-results-title"><span class='search-results-count'></span> result-matching "<span class='search-query'></span>"</h1>
        <ul class="search-results-list"></ul>
    </div>
    <div class="no-results">
        <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
    </div>
</div>
</div>
               <!-- END CONTENT -->
           </div>
       </div>

       <script>
            var COMPODOC_CURRENT_PAGE_DEPTH = 1;
            var COMPODOC_CURRENT_PAGE_CONTEXT = 'component';
            var COMPODOC_CURRENT_PAGE_URL = 'EnrollComponent.html';
       </script>

       <script src="../js/libs/custom-elements.min.js"></script>
       <script src="../js/libs/lit-html.js"></script>
       <script src="../js/menu-wc.js"></script>

       <script src="../js/libs/bootstrap-native.js"></script>

       <script src="../js/libs/es6-shim.min.js"></script>
       <script src="../js/libs/EventDispatcher.js"></script>
       <script src="../js/libs/promise.min.js"></script>
       <script src="../js/libs/zepto.min.js"></script>

       <script src="../js/compodoc.js"></script>

       <script src="../js/tabs.js"></script>
       <script src="../js/menu.js"></script>
       <script src="../js/libs/clipboard.min.js"></script>
       <script src="../js/libs/prism.js"></script>
       <script src="../js/sourceCode.js"></script>
          <script src="../js/search/search.js"></script>
          <script src="../js/search/lunr.min.js"></script>
          <script src="../js/search/search-lunr.js"></script>
          <script src="../js/search/search_index.js"></script>
       <script src="../js/lazy-load-graphs.js"></script>


    </body>
</html>
